<template>
  <div>
    <div class="layui-container" v-if="cinema.length!=0">
      <div class="layui-row">
        <div class="layui-col-lg12">
          <h1 style="color: #FF6347">站长推荐:</h1>
        </div>
      </div>
      <div class="layui-row" style="height: 300px">
        <div class="layui-col-lg3" style="border: 1px red solid">
          <img :src="cinemaPictureUrl" alt="" style="width: 100%;height: 300px">
        </div>
        <div class="layui-col-lg9">
          <div style="height: 300px;" v-if="showMap">
            <el-amap vid="amapDemo" :center="center" :zoom="zoom" class="amap-demo" :showIndoorMap="false">
              <el-amap-marker vid="marker" :position="center" :label="label"></el-amap-marker>
              <el-amap-circle vid="circle" :center="center" :radius="radius"
                              fill-opacity="0.2" strokeColor="#38f"
                              strokeOpacity="0.8" strokeWeight="1" fillColor="#38f">
              </el-amap-circle>
            </el-amap>
          </div>
        </div>
      </div>
      <div class="layui-row" style="margin-top: 40px">
        <div class="layui-col-lg1">
          <span style="color: #EE2C2C">查询</span>
        </div>
        <div class="layui-col-lg2" style="margin-left: -50px">
          <el-input v-model="searchCinema" placeholder="搜索影院"
                    @clear="clearSearch"
                    clearable suffix-icon="el-icon-search" style="float: left" @change="searchCinemaInput"></el-input>
        </div>
      </div>
      <div class="layui-row">
        <div class="layui-col-lg12">
          <table class="layui-table">
            <colgroup>
              <col width="25%">
              <col width="25%">
              <col width="25%">
              <col width="25%">
            </colgroup>
            <thead>
            <tr>
              <th>图片</th>
              <th>地址</th>
              <th>服务</th>
              <th>详情</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,idx) in cinemaPaging" :key="idx">
              <td><img :src="item.picture[0].picture" alt="" style="" @click="changeMap(idx)"></td>
              <td><h3>{{item.cinema.movieTheatreName}}</h3>
                <h3>{{item.cinema.movieTheatreAddress}}</h3>
                <h3>热线:{{item.cinema.contactWay}}</h3></td>
              <td><h3 v-for="(server,index) in item.server">{{server.serve_name}}:{{server.serve_content}}</h3></td>
              <td><h3 style="color: #EE9A00;cursor: pointer" @click="goToSelectVideoHall(item)">详情</h3></td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="layui-row">
        <el-pagination
          background
          layout="prev, pager, next" :page-size="pageSize" @current-change="currentChange"
          @prev-click="prevClick" @next-click="nextClick" :current-page="cinemaStart"
          :total="cinema.length">
        </el-pagination>
      </div>
      <div class="layui-row">
        <button @click="test">测试</button>
      </div>
    </div>
    <div class="layui-container" v-if="cinema.length==0">
      <div class="layui-row" style="margin-top: 300px">
        <div class="layui-col-lg12" style="text-align: center">
          <h1>该电影的放映已结束,请换个电影院尝试</h1>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
    export default {
        name: "buy_movie_ticket_page",
        data() {
            return {
                cinema: [],
                currentPlace: 0,
                center: [0, 0],
                zoom: 18,
                label: {
                    content: '',
                    offset: [-30, -30]
                },
                radius: 20,
                showMap: false,
                cinemaPictureUrl: "",
                searchCinema: "",
                tempCinema: [],
                pageSize: 5,
                cinemaPaging: [],
                cinemaStart: 1
            }
        },
        methods: {
            test() {
                console.log(this.cinema)
            },
            getCinema() {
                let doubanId = sessionStorage.getItem("selectDoubanId")
                this.$axios.get('/api/tato/getCinemaAndPictureAndServerByDoubanId', {
                    params: {
                        doubanId: doubanId
                    }
                }).then((res) => {
                    for (let i = 0; i < res.data.length; i++) {
                        this.cinema.push(res.data[i])
                    }
                    this.tempCinema = this.cinema
                    this.getCinemaPaging()
                    this.getCenter()
                }).catch(function (error) {
                    console.log(error);
                });
            },
            getCenter() {
                let currentPlace = this.cinemaPaging[this.currentPlace].cinema.movieTheatreAddress
                this.$axios.get('https://restapi.amap.com/v3/geocode/geo', {
                    params: {
                        key: "bf336a8142c747a42b4ed61967329cf3",
                        address: currentPlace
                    }
                }).then((res) => {
                    let currentXYZ = res.data.geocodes[0].location
                    this.center[0] = Number(currentXYZ.split(",")[0])
                    this.center[1] = Number(currentXYZ.split(",")[1])
                    this.label.content = currentPlace
                    this.showMap = true
                    this.getCinemaPicture()
                })
            },
            getCinemaPicture() {
                this.cinemaPictureUrl = this.cinemaPaging[this.currentPlace].picture[0].picture
            },
            changeMap(idx) {
                this.showMap = false
                this.currentPlace = idx
                this.getCenter()
            },
            goToSelectVideoHall(e) {
                sessionStorage.setItem("selectCinema", JSON.stringify(e))
                this.$router.push({
                    name: "video_hall_page"
                })
            },
            searchCinemaInput(e) {
                let temp = []
                for (let i = 0; i < this.cinema.length; i++) {
                    if ((this.cinema[i].cinema.movieTheatreName.indexOf(e)) != -1) {
                        temp.push(this.cinema[i])
                    }
                }
                if (temp.length != 0) {
                    this.cinemaPaging = temp
                    this.currentPlace = 0
                    this.showMap = false
                    this.getCenter()
                } else {
                    this.searchCinema = "没有该影院"
                }
            },
            clearSearch() {
                this.cinema = this.tempCinema
                this.currentPlace = 0
                this.showMap = false
                this.getCenter()
            },
            currentChange(e) {
                this.cinemaStart = e
                this.currentPlace = 0
                this.getCinemaPaging()
                this.getCenter()
            },
            prevClick() {
                this.cinemaStart--
                this.currentPlace = 0
                this.getCinemaPaging()
                this.getCenter()
            },
            nextClick() {
                this.cinemaStart++
                this.currentPlace = 0
                this.getCinemaPaging()
                this.getCenter()
            },
            getCinemaPaging() {
                this.cinemaPaging = []
                let start = (this.cinemaStart - 1) * this.pageSize
                for (let i = start; i < start + this.pageSize; i++) {
                    if (this.cinema[i] == undefined) {
                        break;
                    } else {
                        this.cinemaPaging.push(this.cinema[i])
                    }
                }
            }
        },
        created() {
            let user = sessionStorage.getItem("generalUser")
            if (user == null) {
                this.$router.push({
                    name: "login_register_page"
                })
            } else {
                this.getCinema()
            }
        }
    }
</script>

<style scoped>

</style>
